<html>
	<head>
	    <script type="text/javascript" 
	        src="../../../dojo/dojo.js"
	        djConfig="isDebug: true, parseOnLoad: true">
	    </script>
	    <script type="text/javascript">
			dojo.require("doh.runner");
	        dojo.require("dojo.parser");
			dojo.require("dojox.form.CheckedMultiSelect");
			dojo.require("dijit.form.Button");
			dojo.require("dijit.form.Form");
			
			dojo.addOnLoad(function(){
				doh.register("tests",
					[
						function test_setValue(t){
							t.is(["VA","WA"], form.getValues().ms1);
							form.setValues({ms1: ["TN","CA"]});
							t.is(["TN","CA"], form.getValues().ms1);
							ms1.invertSelection();
							t.is(["VA","WA","FL"], form.getValues().ms1);							
						},
						function test_addSelected(t){
							ms1.addSelected(ms2);
							t.is([], form.getValues().ms2);
							ms1.invertSelection();
							t.is(["TN","CA"], form.getValues().ms1);
						},
					]
				);
				doh.run();
				dojo.connect(ms1, "onChange", function(val){
					console.log("First Select Changed to " + val);
				});
			});
		</script>
		<style>
			@import url(../../../dojo/resources/dojo.css);
			@import url(../../../dijit/themes/tundra/tundra.css);
			@import url(../resources/CheckedMultiSelect.css);
			@import url(../../../dijit/tests/css/dijitTests.css);
		</style>
	</head>	
	<body class="tundra">
		<h1 class="testTitle">Test: dojox.form.CheckedMultiSelect</h1>
		<h2>Automated test</h2>
		<form dojoType="dijit.form.Form" jsId="form">
			<select jsId="ms1" multiple="true" name="ms1" dojoType="dojox.form.CheckedMultiSelect">
				<option value="TN">Tennessee</option>
				<option value="VA" selected="selected">Virginia</option>
				<option value="WA" selected="selected">Washington</option>
				<option value="FL">Florida</option>
				<option value="CA">California</option>
			</select>
		<hr>
			<select jsId="ms2" multiple="true" name="ms2" dojoType="dojox.form.CheckedMultiSelect">
				<option value="UT">Utah</option>
				<option value="TX" selected="selected">Texas</option>
				<option value="GA" selected="selected">Georgia</option>
				<option value="ID">Idaho</option>
				<option value="WY">Wyoming</option>
				<option value="OR">Oregon</option>
				<option value="PA">Pennsylvania</option>
			</select>
		<hr>
			<select jsId="ms3" multiple="true" name="ms3" dojoType="dojox.form.CheckedMultiSelect">
			</select>
		<hr>
			<button dojoType="dijit.form.Button">
				<script type="dojo/method" event="onClick">
					console.dir(form.getValues());
				</script>
				Get Values
			</button>
			<button dojoType="dijit.form.Button">
				<script type="dojo/method" event="onClick">
					var idx = dojo.query("option", ms3.domNode).length;
					ms3.addOption(idx + "", "Option " + (idx + 1));
				</script>
				Add Option
			</button>
			<button dojoType="dijit.form.Button">
				<script type="dojo/method" event="onClick">
					ms3.setAttribute("disabled", !ms3.disabled);
				</script>
				Toggle Disabled
			</button>
		</form>
	</body>
</html>
